<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    svg {
      border: solid 2px black;
    }
  </style>
  <body>
    <!-- flubber 平滑过渡代码库  gsap  animate.js -->
    <!-- attributeName 变化的属性名称 from 初始值 to|by 结束值|变化多少 dur 持续时间 repeatCount 重复次数 repeatDur 重复总的时间 fill 填充模式 -->
    <svg width="600" height="600" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="100" cy="100" r="50" fill="red" stroke="black" stroke-width="20">
        <animate attributeName="cx" from="100" to="500" dur="5s" repeatCount="indefinite" />
      </circle>
    </svg>
    <svg width="600" height="600" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M297 8L54 1L34 24L1 127L240 154L297 8Z" fill="#FF6060" stroke="#FF8D8D">
        <animate attributeName="d" from="M297 8L54 1L34 24L1 127L240 154L297 8Z" to="M5.00002 186C-16.6 176.4 46 96 80 57L65" dur="1s" repeatCount="indefinite" fill="freeze" />
      </path>
    </svg>
  </body>
</html>
